<div ng-controller="homeController as ctrl">
  <accordion>
    <accordion-group ng-show="ctrl.emails.length > 0" >
        <accordion-heading>
            Related Emails ({{ ctrl.emails.length }})
        </accordion-heading>
        <div ng-repeat="mail in ctrl.emails">
            <div class="list-group">
                <a href class="list-group-item active" ng-click="showDetails = ! showDetails">
                    <h4 class="list-group-item-heading">{{mail.Subject}}</h4>
                    <p class="list-group-item-text">{{mail.DateTimeSent | date:'dd/MM/yyyy h:mma'}} | {{mail.From.EmailAddress.Address}} </p>
                    <div class="mail-wrap" ng-click="toggleView" ng-show="showDetails" ng-bind-html="mail.Body.Content | to_trusted">
                        {{mail.Body.Content}}
                    </div>
                </a>
            </div>
        </div>
    </accordion-group>

    <accordion-group ng-show="ctrl.files.length > 0">
        <accordion-heading>
            Related Documents ({{ ctrl.files.length }})
        </accordion-heading>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Title</th>
                        <th>FileExtension</th>
                        <th>Author</th>
                        <th>Created</th>
                        <th>Modified</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="document in ctrl.files | filter: filterDocs">
                        <th scope="row"><img ng-src="https://agile9.sharepoint.com/_layouts/15/images/icdocx.png" /></th>
                        <td><a ng-href={{document.LinkingUrl}}>{{document.Title}}</a></td>
                        <td>{{document.FileExtension}}</td>
                        <td>{{document.Author}}</td>
                        <td>{{document.Write | date:'dd/MM/yyyy h:mma'}}</td>
                        <td>{{document.LastModifiedTime | date:'dd/MM/yyyy h:mma'}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </accordion-group>

    <accordion-group ng-show="ctrl.numEmployees > 0">
        <accordion-heading>
            Employees ({{ ctrl.numEmployees }})
        </accordion-heading>
        <div ng-repeat="company in ctrl.companies">
            {{company.Name}} - {{company.Email}}
            <ul>
                <li ng-repeat="employee in company.Employees">
                    {{ employee.FullName }} - {{ employee.JobTitle }}
                </li>
            </ul>
        </div>
	</accordion-group>

    <accordion-group >
        <accordion-heading>
            Reports
        </accordion-heading>
        <highchart style="width:100%" id="chart1" config="ctrl.chartConfig"></highchart>
	</accordion-group>
  </accordion>
</div>